<template>
  <div class="app-container">
    <p>按钮主题</p>
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>
    <p style="height:1000px">1000px高度</p>
    <el-button type="primary" @click="dialogVisible = true">显示弹窗</el-button>
    <el-dialog append-to-body :close-on-click-modal="false" class="el-dialog" v-model="dialogVisible" title="弹窗"
      width="30%">
      <div style="height: 1000px">弹窗内容弹窗内容弹窗内容弹窗内容</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="text" @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="dialogVisible = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="element">
const dialogVisible = ref(false)
</script>

<style lang="scss" scoped>

</style>
